<style lang="less" scoped>
  .page__wrapper {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 0;
    background: #f6f6f6;

    > .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      > .top {
        margin: 5px;
        height: 80px;
        display: flex;
        .card {
          flex: 1;
          background: #ffffff;
          display: flex;
          > .left {
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: white;
          }
          > .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .count {
              font-size: 20px;
              font-weight: bold;
              margin: 5px;
            }
            .des {
              font-size: 12px;
              color: #9f9f9f;
              margin: 5px;
            }
          }
          &:not(:first-child):not(:last-child) {
            margin: 0 10px;
          }
          &:nth-child(1) {
            .left {
              background: #64d572;
            }
            .right {
              .count {
                color: #64d572;
              }
            }
          }
          &:nth-child(2) {
            .left {
              background: #f25e43;
            }
            .right {
              .count {
                color: #f25e43;
              }
            }
          }
          &:nth-child(3) {
            .left {
              background: #ffd572;
            }
            .right {
              .count {
                color: #ffd572;
              }
            }
          }
        }
      }
      > .bottom {
        flex: 1;
        margin: 5px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
      }
    }
    > .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      > .top {
        flex: 1;
        display: flex;
        > .left {
          flex: 1;
          margin: 5px;
          display: flex;
          flex-direction: column;
          background: #ffffff;
        }
        > .right {
          flex: 1;
          margin: 5px;
          display: flex;
          flex-direction: column;
          background: #ffffff;
        }
      }
      > .bottom {
        flex: 1;
        margin: 5px;
        display: flex;
        flex-direction: column;
        background: #ffffff;
      }
    }
    .cChart-title {
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      color: #a0a0a0;
      border-bottom: 1px solid #ffffff;
    }
    .eChart-wrapper {
      flex: 1;
      padding: 10px;
      div {
        height: 100%;
        width: 100%;
      }
    }
  }
</style>
<template>
  <div class="page__wrapper">
    <div class="left">
      <div class="top">
        <div class="card">
          <div class="left">
            <i class="el-icon-star-off"></i>
          </div>
          <div class="right">
            <div class="count">20,037,231</div>
            <div class="des">资产总额（万元）</div>
          </div>
        </div>
        <div class="card">
          <div class="left">
            <i class="el-icon-star-off"></i>
          </div>
          <div class="right">
            <div class="count">10,327,084</div>
            <div class="des">负债总额（万元）</div>
          </div>
        </div>
        <div class="card">
          <div class="left">
            <i class="el-icon-star-off"></i>
          </div>
          <div class="right">
            <div class="count">51.53%</div>
            <div class="des">资产负债率</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="cChart-title">财产能力情况</div>
        <div class="eChart-wrapper">
          <div id="propertyCapacity"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="left">
          <div class="cChart-title">资产总额分布</div>
          <div class="eChart-wrapper">
            <div id="TAD"></div>
          </div>
        </div>
        <div class="right">
          <div class="cChart-title">负债总额分布</div>
          <div class="eChart-wrapper">
            <div id="TLD"></div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="cChart-title">资产负载率变化趋势</div>
        <div class="eChart-wrapper">
          <div id="TILR"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { addResizeListener } from '@/components/util/resize-event'

export default {
  data () {
    return {
      eChartConfig: {
        propertyCapacity: {
          option: {
            color: ['#32C5E9', '#ff9f7f'],
            tooltip: {},
            legend: {
              right: 0,
              data: ['期末数', '期初数']
            },
            radar: {
              // shape: 'circle',
              name: {
                textStyle: {
                  color: '#a0a0a0',
                  borderRadius: 3,
                  padding: [3, 5]
                }
              },
              indicator: [
                { name: '资产总额', max: 6500 },
                { name: '占用主办国有企业的固定资产净额', max: 16000 },
                { name: '负债总额', max: 30000 },
                { name: '净资产', max: 38000 },
                { name: '资产负债率', max: 52000 }
              ]
            },
            series: [{
              name: '期末 vs 期初',
              type: 'radar',
              // areaStyle: {normal: {}},
              data: [
                {
                  value: [4300, 10000, 28000, 35000, 50000],
                  name: '期末数'
                },
                {
                  value: [5000, 14000, 28000, 31000, 42000],
                  name: '期初数'
                }
              ]
            }]
          },
          obj: null
        },
        TAD: {
          option: {
            color: ['#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f'],
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
              {
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                  { value: 535, name: '集团公司' },
                  { value: 510, name: '辽宁总公司' },
                  { value: 634, name: '沈阳分公司' },
                  { value: 735, name: '大连分公司' }
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
          obj: null
        },
        TLD: {
          option: {
            color: ['#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f'],
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
              {
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data: [
                  { value: 535, name: '集团公司' },
                  { value: 510, name: '辽宁总公司' },
                  { value: 634, name: '沈阳分公司' },
                  { value: 735, name: '大连分公司' }
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
          obj: null
        },
        TILR: {
          option: {
            color: ['#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f'],
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              textStyle: {
                color: '#a0a0a0'
              },
              data: ['集团公司', '辽宁总公司', '沈阳分公司', '大连分公司']
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            textStyle: {
              color: '#a0a0a0'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: ['2018年1季度', '2018年2季度', '2018年3季度', '2018年4季度', '2019年1季度']
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '集团公司',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [120, 132, 101, 134, 90, 230, 210]
              },
              {
                name: '辽宁总公司',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [220, 182, 191, 234, 290, 330, 310]
              },
              {
                name: '沈阳分公司',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [150, 232, 201, 154, 190, 330, 410]
              },
              {
                name: '大连分公司',
                type: 'line',
                stack: '总量',
                smooth: true,
                data: [320, 332, 301, 334, 390, 330, 320]
              }
            ]
          },
          obj: null
        }
      }
    }
  },
  computed: {},
  methods: {},
  mounted () {
    for (let key in this.eChartConfig) {
      this.eChartConfig[key].obj = echarts.init(document.getElementById(key))
      this.eChartConfig[key].obj.setOption(this.eChartConfig[key].option)
    }
    addResizeListener(this.$el.parentElement, () => {
      for (let key in this.eChartConfig) {
        this.eChartConfig[key].obj.resize()
      }
    })
  }
}
</script>
